<template>
  <div class="wrap dataStatic">
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="累计减碳量"
            :value="totalData?.totalCarbon || 0"
            suffix=""
            :value-style="{ color: '#3f8600', fontSize: '34px', fontWeight: 'bold' }"
          >
            <!-- <template #prefix>
              <arrow-up-outlined />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="累计发放碳积分"
            :value="totalData?.totalScore || 0"
            suffix=""
            :value-style="{ color: '#3f8600', fontSize: '34px', fontWeight: 'bold' }"
          >
            <!-- <template #prefix>
              <arrow-up-outlined />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-range-picker valueFormat="YYYY/MM/DD" v-model:value="date" />
        <a-button type="primary" style="margin-left: 20px" @click="getData">筛选</a-button>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="当前时间减碳量"
            :value="totalData?.carbon || 0"
            suffix=""
            :value-style="{ color: '#3f8600', fontSize: '34px', fontWeight: 'bold' }"
          >
            <!-- <template #prefix>
              <arrow-up-outlined />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card>
          <a-statistic
            title="当前时间发放碳积分"
            :value="totalData?.score || 0"
            suffix=""
            :value-style="{ color: '#3f8600', fontSize: '34px', fontWeight: 'bold' }"
          >
            <!-- <template #prefix>
              <arrow-up-outlined />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { user_getStatisticsData } from '@/api/user'
import { ref, onMounted } from 'vue'

const totalData: any = ref()
const date = ref()
const getData = async () => {
  console.log(date.value, '22')
  let beginTime = undefined
  let endTime = undefined
  if (date.value) {
    beginTime = `${date.value[0]} 00:00:00`
    endTime = `${date.value[0]} 23:59:59`
  }
  let res = await user_getStatisticsData({ beginTime, endTime })
  totalData.value = res.data
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss">
.dataStatic .ant-statistic-title {
  font-size: 20px;
  font-weight: bold;
}
</style>
